<template>
	<view>
		<!-- 首页 开始 -->
		<view class="article">
			<view class="user-dynamic">
				<!-- 用户信息 -->
				<view class="user">
					<view class="head-portrait">
						<image :src="homeArticleData[index].headPortrait" mode="aspectFit" lazy-load @click="userSpace"></image>
					</view>
					<view class="info">
						<text @click="userSpace">{{ homeArticleData[index].username }}</text>
						<text>2022-4-8 下午 4:00</text>
					</view>
					<!-- 操作 -->
					<view class="operation">
						<uni-icons type="more-filled" style="color: #00007f;" @click="open"></uni-icons>
						<uni-popup ref="popup">
							<!-- 更多操作 -->
							<my-userOperation></my-userOperation>
						</uni-popup>
					</view>
				</view>
				<!-- 标题 -->
				<view class="title">
					<text>{{ homeArticleData[index].article }}</text>
				</view>
				<!-- 图片 -->
				<view class="img" @click="details(articleList.id)">
					<uni-grid :column="homeArticleData[index].imgArr.length <= 2 ? 2 : 3">
						<uni-grid-item class="img-item" v-for="(imgItem, i) in articleList.imgArr" :key="i">
							<image :src="imgItem.url" mode="widthFix" lazy-load></image>
						</uni-grid-item>
					</uni-grid>
				</view>
				<!-- 按钮 -->
				<view class="icon">
					<!-- 点赞 -->
					<view class="icon-1" hover-class="animate__animated animate__heartBeat" @click="praise(homeArticleData[index].id)">
						<uni-icons color="red" type="hand-up" size="20" v-if="homeArticleData[index].praise.type"></uni-icons>
						<uni-icons type="hand-up" size="20" v-else></uni-icons>
						<text>{{ homeArticleData[index].praise.num }}</text>
					</view>
					<!-- 点踩 -->
					<view class="icon-2" hover-class="animate__animated animate__heartBeat" @click="opposition(homeArticleData[index].id)">
						<uni-icons color="red" type="hand-down" size="20" v-if="homeArticleData[index].opposition.type"></uni-icons>
						<uni-icons type="hand-down" size="20" v-else></uni-icons>
						<text>{{ homeArticleData[index].opposition.num }}</text>
					</view>
					<!-- 评论 -->
					<view class="icon-3" @click="details">
						<uni-icons type="chat" size="20"></uni-icons>
						<text>{{ homeArticleData[index].comment }}</text>
					</view>
					<!-- 分享 -->
					<view class="icon-4" @click="select">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>{{ homeArticleData[index].share }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 首页 结束 -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'my-homeArticle',
	props: {
		// 内容数据
		articleList: {
			type: Object,
			default: () => {}
		},

		// 内用索引
		index: {
			type: Number,
			default: 0
		}
	},

	data() {
		return {}
	},

	methods: {
		// 调用vuex方法
		...mapMutations('m_community', ['homeArticle', 'updatePreferState', 'updateOppositionState']),

		// 打开个人空间
		userSpace() {
			uni.navigateTo({
				url: '/subpkg/user_Space/user_Space'
			})
		},

		// 进入详情
		details() {
			uni.navigateTo({
				url: '/subpkg/details/details'
			})
		},

		// 分享
		select() {
			console.log('分享')
		},

		// 点赞 / 取消点赞
		praise(id) {
			this.updatePreferState(id)
		},

		// 踩 / 取消踩
		opposition(id) {
			this.updateOppositionState(id)
		},

		// 打开用户更多操作
		open() {
			this.$refs.popup.open('center')
		}
	},

	computed: {
		...mapState('m_community', ['homeArticleData'])
	},

	created() {
		this.homeArticle(this.articleList)
	}
}
</script>

<style lang="less">
.article {
	display: flex;
	justify-content: center;
	margin-bottom: 10rpx;
	.user-dynamic {
		width: 662rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
		background-color: #fff;
		.user {
			display: flex;
			position: relative;
			.head-portrait {
				margin: 0 15rpx;
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
			}
			.info {
				display: flex;
				flex-direction: column;
				margin-top: 10rpx;
				& > text:nth-child(1) {
					font-size: 30rpx;
					font-weight: 600;
					margin-bottom: 5rpx;
					color: #00007f;
				}
				& > text:nth-child(2) {
					font-size: 24rpx;
					color: #6d6d72;
				}
			}
			.operation {
				position: absolute;
				top: 30rpx;
				right: 20rpx;
			}
		}
		.title {
			margin-top: 10rpx;
			word-break: break-all;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 6;
			overflow: hidden;
			text {
				font-size: 32rpx;
			}
		}
		// 媒体区域
		.img {
			display: flex;
			width: 100%;
			margin-top: 10rpx;
			.img-item {
				height: 100% !important;
				image {
					width: 100%;
				}
			}
		}
		.icon {
			display: flex;
			margin-top: 15rpx;
			view {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				text {
					margin-left: 15rpx;
					font-size: 28rpx;
					color: #888888;
				}
			}
		}
	}
}
</style>
